<template>
  <div class="shopcart">
    <cart-nav-bar></cart-nav-bar>
    <cart-list></cart-list>
    <!-- 计算商品总价 -->
    <div class="calulate">
      <div class="selectall"><i class="el-icon-circle-check"></i>全选</div>
      <!-- 没有选择商品 -->
      <!-- <span>合计：￥0</span> -->
      <div class="select-cal">        
        <div style="text-align:right">
          <span>已选择1件，合计：{{ TotalPrice }}</span
          ><br />
          <span><a href="#">查看明细></a></span>
        </div>
      </div>
      <div class="forpay">结算</div>
      <!-- 选择商品 -->
    </div>
  </div>
</template>

<script>
import CartList from "../shopcart/children/CartList.vue";
import CartNavBar from "./children/CartNavBar.vue";

export default {
  name: "ShopCat",
  components: {
    CartNavBar,
    CartList,
  },
  data() {
    return {
      mycart: [{}],
    };
  },
  created() {
    // this.getCart();
  },
  computed: {
    TotalPrice() {
      let sum = 0;
      let Aobj = this.$store.state.shopCart;
      // alert(Aobj);
      if (Aobj && Aobj.length) {
        for (let i in Aobj) {
          if (Aobj[i].ischecked) {
            // alert(Aobj[i].price);
            sum += Aobj[i].price;
          }
        }
        return sum;
      }
    },
  },
  methods: {
    getCart() {
      console.log("123", this.$store.state.shopCart);
      this.mycart = this.$store.state.shopCart;
    },
  },
};
</script>

<style scoped>
.shopcart {
  /* position: relative; */
  /* height:574px; */
  background-color: grey;
}
.calulate {
  position: fixed;
  bottom: 59px;
  left: 10px;
  right: 10px;
  z-index: 9;
  /* background-color: green; */
  display: flex;
  justify-content: center;
    align-items: center;
}
.selectall {
  flex: 0.3;
  /* background-color: yellow; */
}
.forpay {
  flex: 0.3;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 20px;
  background: orange;
  color: #fff;
  margin-left: 10px;
}
.select-cal {
  flex: 1;
}

</style>